<template>
  <base-breadcrumb>
    <searchData :search-data="searchArr" @search="search" />
    <a-card :bordered="false">
      <list-table ref="table" :columns="columns" :statistics-config="{ use: true, statistics: null, temp }"
        :request="loadData" :export-config="{ use: true, select: '导出选中-工程物资需求月计划', all: '导出全部-工程物资需求月计划' }">
        <template slot="prefix">
          <a-button v-btnPermission="'pm_066_add_01'" type="primary" icon="plus" @click="handleEdit(null, 1)">
            新增
          </a-button>
        </template>
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
        <template slot="auditStatusStr" slot-scope="text, record">
          <list-status :status="record.auditStatus" :text="text" />
        </template>
        <template slot="operation" slot-scope="text, record">
          <MoreButton>
            <a @click="handleEdit(record, 3)">查看</a>
            <a v-if="editStatus(record) && hideBuquBtn()" @click="handleEdit(record, 2)">编辑</a>
            <template v-if="record.auditStatus === 'DRAFT' && hideBuquBtn()">
              <a @click="handleDel(record.id)">删除</a>
            </template>
            <a v-if="record.auditStatus === 'PAST' || record.auditStatus === 'SUBMITTED' || record.auditStatus === 'REJECTED'"
              @click="chooseId = record.id; $refs.approval.open()">审批详情</a>
          </MoreButton>
        </template>
      </list-table>
    </a-card>
    <approval :id="chooseId" ref="approval" title="审批" tableTime="changeTime" />
  </base-breadcrumb>
</template>

<script>
import moment from 'moment'
import { monthPlanList, monthPlanListDel, findListCount } from '@/api/project/suppliesMonthPlan/monthPlan'

import approval from './approval'
import SelectSubCompany from '@/components/Select/SelectSubCompany'
import SelectProject from '@/components/Select/SelectProject'
import OrgTreeSelect from '@/components/OrgTreeSelect'

export default {
  name: 'a' + Date.now(),
  components: { approval },
  data() {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          scopedSlots: { customRender: 'index' },
          width: 70
        },
        {
          title: '所属分公司',
          dataIndex: 'branchCompany',
          width: 150
        },
        {
          title: '计划类型',
          dataIndex: 'planTypeName',
          width: 100
        },
        {
          title: '物资需求月计划编码',
          dataIndex: 'monthCode',
          width: 200
        },
        {
          title: '项目名称',
          dataIndex: 'projectName',
          width: 140
        },

        {
          title: '编号',
          dataIndex: 'codeAll',
          width: 100
        },
        {
          title: '联系人',
          dataIndex: 'accountName',
          width: 120
        },
        {
          title: '电话',
          dataIndex: 'phone',
          width: 120
        },
        {
          title: '计划月份',
          dataIndex: 'planTime',
          width: 160
        },
        {
          title: '创建人',
          dataIndex: 'creatorName',
          width: 150
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 160
        },
        {
          title: '状态',
          dataIndex: 'auditStatusStr',
          width: this.STATUS_WIDTH,
          scopedSlots: { customRender: 'auditStatusStr' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 180,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      searchArr: [
        // 搜索框
        {
          name: '所属单位',
          valueKey: 'searchQuery',
          type: OrgTreeSelect,
        },
        {
          name: '月计划编码',
          value: 'monthCode',
          type: 'input'
        },
        {
          name: '编号',
          value: 'code',
          type: 'input'
        },
        {
          name: '联系人',
          value: 'contact',
          type: 'input'
        },
        {
          name: '电话',
          value: 'phone',
          type: 'input'
        },
        {
          name: '创建人',
          value: 'creatorName',
          type: 'input'
        },
        {
          name: '计划月份',
          value: 'planTime',
          type: 'monthFormat'
        },
        {
          name: '创建时间',
          value: 'create',
          type: 'timeRangeFormat'
        },
        {
          name: '状态',
          type: 'select',
          value: 'auditStatus',
          data: [
            { label: '待提交审核', value: 'DRAFT', enabled: true },
            { label: '审核中', value: 'SUBMITTED', enabled: true },
            { label: '审核通过', value: 'PAST', enabled: true },
            { label: '审核不通过', value: 'REJECTED', enabled: true },
            { label: '已变更', value: 'CHANGE', enabled: true }
          ]
        }
      ],
      // 查询参数
      queryParam: {},
      chooseId: '',
      loadData: (params) => {
        let searchData = Object.assign(params, this.queryParam)
        findListCount(searchData).then(res => {
          if (res.code === this.SUCCESS_CODE) this.statistics = res.data
        })
        return monthPlanList(searchData)
      },
      statistics: {},
      temp: () => {
        return <span>
          待提交审核：{this.statistics.draft}，
          审核中：{this.statistics.submitted}，
          审核通过：{this.statistics.past}，
          审核不通过：{this.statistics.rejected}
        </span>
      }
    }
  },
  created() {
  },
  methods: {
    editStatus(record) {
      if (record.auditStatus !== 'SUBMITTED') {
        return true
      }
      return record.auditStatus === 'CHANGE' && record.changeUserId === this.$userInfo().id
    },
    openApprovalDetail(row, state) {
      this.$bus.$emit('showApprovalDetailsDialog', row.id)
    },
    openApprovalHistory(id) {
      this.$refs.history.open(id)
    },
    search(val) {
      this.queryParam = val || {}
      if (this.queryParam.planTime) {
        this.queryParam.planStartTime = this.queryParam.planTime
        this.queryParam.planEndTime = moment(this.queryParam.planTime).endOf('month').format('YYYY-MM-DD') + ' 23:59:59'
      }
      this.$refs.table.getData(null, true)
    },
    handleEdit(record, state) {
      this.$router.push({
        path: '/project/supplies/suppliesMonthPlanAdd',
        query: {
          id: record && record.id || '',
          pageTag:'list',
          state: state
        }
      })
    },
    handleDel(id) {
      this.delList(monthPlanListDel, () => {
        this.$refs.table.getData()
      }, { ids: [id] })
    }
  }
}
</script>
